<!-- 司机详情 -->
<template>
  <!-- <div class="dashboard-container driver-detail">
  </div> -->
  <div class="app-container">
    <el-card style="height:100%">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <!-- 基本信息 -->
        <el-tab-pane
          name="first"
        >
          <span
            slot="label"
          >基本信息</span>
          <!-- 点击编辑前显示的页面 -->
          <div v-if="detailVisible">
            <div class="Layout">
              <div class="basicInformation">
                <el-row>
                  <div>
                    <el-col :span="8">
                      <span>员工编号： {{ driverdeta.userId }}</span>
                    </el-col>
                  </div>
                  <div>
                    <el-col :span="8">
                      <span>司机名称：{{ driverdeta.name }}</span>
                    </el-col>
                  </div>
                  <div>
                    <el-col :span="8">
                      <span>所属机构：{{ driverdeta.agency.name }}</span>
                    </el-col>
                  </div>
                  <div class="phoneage">
                    <div>
                      <el-col :span="8">
                        <span>电话：{{ driverdeta.mobile }}</span>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="9">
                        <span>年龄：{{ driverdeta.age }}</span>
                      </el-col>
                    </div>
                  </div>
                </el-row>
              </div>
            </div>
            <div class="footbox">
              <el-button
                class="editbtn"
                @click="edit"
              >编辑</el-button>
            </div>
          </div>
          <!-- 点击编辑后显示的页面 -->
          <div v-else>
            <div class="Layout">
              <div class="basicInformation">
                <el-row>
                  <div>
                    <el-col :span="8">
                      <span>员工编号：
                        <el-input
                          :placeholder="driverdeta.userId"
                          disabled
                          style="width:240px"
                        ></el-input>
                      </span>
                    </el-col>
                  </div>
                  <div>
                    <el-col :span="8">
                      <span>司机名称：
                        <el-input
                          :placeholder="driverdeta.name"
                          disabled
                          style="width:240px"
                        ></el-input>
                      </span>
                    </el-col>
                  </div>
                  <div>
                    <el-col :span="8">
                      <span>所属机构：
                        <el-input
                          :placeholder="driverdeta.agency.name"
                          disabled
                          style="width:240px"
                        ></el-input>
                      </span>
                    </el-col>
                  </div>
                  <div class="phoneage">
                    <div>
                      <el-col :span="8">
                        <span>电话：
                          <el-input
                            :placeholder="driverdeta.mobile"
                            disabled
                            style="padding-left:28px; padding-top:15px;width:268px"
                          ></el-input>
                        </span>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="9">
                        <span>年龄：
                          <el-input
                            v-model="driverdeta.age"

                            style="padding-left:28px; padding-top:15px;width:268px"
                          ></el-input>
                        </span>
                      </el-col>
                    </div>
                  </div>
                </el-row>
              </div>
            </div>
            <div class="footbox">

              <el-button
                class="editbtn"
                @click="saveBtn"
              >保存</el-button>
              <el-button
                style="width:110px; background:#ffeeeb"
                @click="Cancel"
              >取消</el-button>

            </div>
          </div>
        </el-tab-pane>
        <!-- 驾驶证信息 -->
        <el-tab-pane
          label="驾驶证信息"
          name="second"
        >
          <!-- 点击编辑前显示的页面 -->
          <div v-if="detailVisible">
            <div class="Layout">
              <div class="basicInformation">
                <el-row>
                  <div>
                    <el-col :span="8">
                      <span>驾驶证号： {{ drivercard.licenseNumber }}</span>
                    </el-col>
                  </div>
                  <div>
                    <el-col :span="8">
                      <span>准驾车型：{{ drivercard.allowableType }}</span>
                    </el-col>
                  </div>
                  <div>
                    <el-col :span="8">
                      <span>初次领证日期： {{ drivercard.initialCertificateDate }}</span>
                    </el-col>
                  </div>
                  <div class="phoneage">
                    <div>
                      <el-col :span="8">
                        <span>驾驶证有效期限：{{ drivercard.validPeriod }}年</span>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="8">
                        <span>驾龄：{{ drivercard.driverAge }}年</span>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="8">
                        <span>驾驶证类型：{{ drivercard.licenseType }}类驾照</span>
                      </el-col>
                    </div>
                  </div>
                  <div class="phoneage">
                    <div>
                      <el-col :span="8">
                        <span>从业资格证: {{ drivercard.qualificationCertificate }}</span>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="8">
                        <span>入场证信息：{{ drivercard.passCertificate }}</span>
                      </el-col>
                    </div>
                  </div>
                  <div class="demo-image__preview">
                    <el-col :span="10">
                      <span class="imginfo">图片信息</span>
                      <el-image
                        v-for="(item, index) in drivercard.picture"
                        :key="index"
                        style="width: 100px; height: 100px"
                        :src="item"
                        :preview-src-list="srcList"
                      >
                        <div
                          slot="error"
                          class="image-slot"
                        >
                          <i class="el-icon-picture-outline"></i>
                        </div>
                      </el-image>
                    </el-col>
                  </div>
                </el-row>
              </div>
            </div>
            <div class="footboxs">
              <el-button
                class="editbtn"
                @click="edit"
              >编辑</el-button>
            </div>
          </div>
          <!-- 点击编辑后显示的页面 -->
          <div v-else>
            <div class="Layout">
              <div class="basicInformation">
                <el-row>
                  <div>
                    <el-col :span="8">
                      <span>驾驶证号：
                        <el-input
                          v-model="drivercard.licenseNumber"
                          placeholder="请输入驾驶证号"
                          style="width:256px;padding-left:42px"
                        ></el-input>
                      </span>
                    </el-col>
                  </div>
                  <div>
                    <el-col :span="8">
                      <span>准驾车型：
                        <el-input
                          v-model="drivercard.allowableType"
                          placeholder="请输入准驾车型"
                          style="width:228px;padding-left: 14px;"
                        ></el-input>
                      </span>
                    </el-col>
                  </div>
                  <div>
                    <el-col :span="8">
                      <span>初次领证日期：

                        <el-date-picker
                          v-model="drivercard.initialCertificateDate"
                          style="width:240px !important"
                          type="date"
                          placeholder="请选择注册时间"
                          value-format="yyyy-MM-dd"
                        >
                        </el-date-picker>

                      </span>
                    </el-col>
                  </div>
                  <div
                    class="phoneage"
                  >
                    <div>
                      <el-col :span="8">
                        <span>驾驶证有效期限：
                          <el-input
                            v-model=" drivercard.validPeriod "
                            placeholder="请输入驾驶证有效期限"
                            style="width:214px;padding-top:15px;padding-bottom:15px "
                          ></el-input>
                          <span class="posr">年</span>
                        </span>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="8">
                        <span>驾龄：
                          <el-input
                            v-model="drivercard.driverAge "
                            placeholder="请输入驾龄"
                            style="width:214px;padding-top:15px;padding-bottom:15px;padding-left: 42px;"
                          ></el-input>
                          <span class="posr">年</span>
                        </span>
                      </el-col>
                    </div>
                    <div>
                      <el-col :span="8">
                        <span>驾驶证类型：
                          <el-input
                            v-model="drivercard.licenseType"
                            placeholder="请输入驾驶证类型"
                            style="width:256px; padding-top:15px;padding-bottom:15px;padding-left: 14px;"
                          ></el-input>
                        </span>
                      </el-col>
                    </div>
                    <div class="phoneage">
                      <div>
                        <el-col :span="8">
                          <span>从业资格证：
                            <el-input
                              v-model="drivercard.qualificationCertificate"
                              placeholder="请输入从业资格证"
                              style="width:242px;padding-left:28px;"
                            ></el-input>
                          </span>
                        </el-col>
                      </div>
                      <div>
                        <el-col :span="8">
                          <span>入场证信息：
                            <el-input
                              v-model="drivercard.passCertificate"
                              placeholder="请输入入场证信息"
                              style="width:214px"
                            ></el-input>
                          </span>
                        </el-col>
                      </div>
                    </div>
                    <div>
                      <el-col :span="24">
                        <div class="imgdata">
                          <span
                            class="imginfo"
                            style="padding-right: 60px;"
                          >图片信息</span>
                          <!-- 文件上传组件 -->
                          <avatarUpload v-model="drivercard.picture"></avatarUpload>
                        </div>
                      </el-col>
                    </div>
                  </div></el-row>
              </div>
            </div>
            <div class="footboxs">
              <el-button
                class="editbtn"
                @click="editbtn"
              >保存</el-button>
              <el-button
                style="width:110px;background:#ffeeeb"
                @click="Cancel"
              >取消</el-button>
            </div>
          </div>
        </el-tab-pane></el-tabs>
    </el-card>

  </div>
</template>
<script>
import avatarUpload from '@/views/transit/components/avatar-upload.vue'
import { driverDetail, driverDetailUpdate, driverLicenseDetail, driverLicenseDetailUpdate } from '@/api/transit'
export default {
  name: 'DriverDetail',
  components: {
    avatarUpload
  },
  data () {
    return {
      activeName: 'first',
      detailVisible: true,
      // 选择日期
      value1: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 路由传参的id数据
      id: null,
      // 司机基本信息
      driverdeta: {
        agency: null
        // truck: {

        //   allowableLoad: 0, // 准载重量
        //   allowableVolume: null // 准载体积
        // }

      },
      // 驾驶证信息
      drivercard: {
        licenseNumber: null, // 驾驶证号
        allowableType: null, // 驾驶车型
        initialCertificateDate: null, // 林正日期
        validPeriod: null, // 有效期
        driverAge: null, // 驾龄
        licenseType: null, // 驾驶证类型
        qualificationCertificate: null, // 从业资格证
        passCertificate: null, // 入场证信息
        picture: null // 图片信息
      },
      // 放大
      srcList: []
    }
  },
  created () {
    // 接收路由传的userId
    const id = this.$route.query.id
    this.id = id
    // 调用司机详情信息函数
    this.driverDetail(this.id)
    // 调用司机驾驶证信息函数
    this.driverLicenseDetail(this.id)
  },
  methods: {
    // 页面切换
    handleClick() {
      this.detailVisible = true
    },
    // 编辑按钮
    edit() {
      this.detailVisible = false
    },
    // 取消按钮
    Cancel() {
      this.detailVisible = true
    },
    // 获取司机详情信息接口
    async driverDetail(id) {
      const { data } = await driverDetail(id)
      this.driverdeta = data
    },
    // 获取司机驾驶证信息
    async driverLicenseDetail(id) {
      const { data } = await driverLicenseDetail(id)
      this.drivercard = data
      if (data.picture === null) {
        this.drivercard.picture = []
        return
      }
      if (typeof data.picture === 'string') {
        this.drivercard.picture = data.picture
        this.drivercard.picture = this.drivercard.picture.split(',')
        this.srcList = this.drivercard.picture
        return
      }
    },
    // 基本信息保存按钮
    async saveBtn() {
      this.driverDetailUpdate(this.id, this.driverdeta)
      // 回到详情页面
      this.detailVisible = true
      // 成功提示消息
      this.$message.success('更新司机信息成功')
    },
    // 更新司机信息接口
    async driverDetailUpdate(id, data) {
      await driverDetailUpdate(id, data)
    },
    // 更新驾驶证信息
    async driverLicenseDetailUpdate(data) {
      await driverLicenseDetailUpdate(data)
    },
    // 保存驾驶证信息按钮
    async editbtn() {
      // this.driverLicenseDetailUpdate(){ id: this.id, ...this.drivercard }
      try {
        const res = await driverLicenseDetailUpdate(this.drivercard)
        console.log(123, res)
        this.detailVisible = true
        this.$message.success('更新驾驶证信息成功')
      } catch (error) {
        console.log(error, '更新失败')
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.driver-detail {
    ::v-deep .el-container{
    flex-direction: column;
    margin-left: 0px;

  }
  .in{
    height: calc(100vh - 205px);
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
::v-deep.el-tabs {
  background: #fff;
}
::v-deep .el-tabs__header {
  margin: 0px 50px 15px;
}
::v-deep .el-tabs__active-bar  {
    width: 49px !important;
    background-color: #e15536;
    left: 6px;
}
::v-deep .el-tabs__item.is-active {
  font-size: 16px;
  font-weight: 700;
  color: #20232a;
}
::v-deep .el-tabs__item:hover {
  color: #20232a;
  cursor: pointer;
}
::v-deep .el-tabs__nav-scroll {
  padding-top: 10px;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0.5px;
}
::v-deep .el-input {
  width:240px
}
::v-deep .el-image {
  width: 178px !important;
  height: 178px !important;
  left: 88px;
  top: -16px;
}
.app-container {
  // background-color: #ffffff;

  .clearfix {
    font-size: 16px;
    font-weight: 700;
    color: #20232a;
  }
  .Layout {
    width: 100%;
    // min-height: 100%;
    padding: 15px 26px;
    .basicInformation {
      padding: 0 24px;
      .phoneage {
        padding-top: 40px;
      }
    }
    span {
      min-width: 80px;
      font-weight: 400;
      text-align: right;
      color: #20232a;
      font-size: 14px;
    }
  }
}
.footbox {
  text-align: center;
  width: 100%;
  height: 100%;
  //  border-top: 1px solid #e5e7ec;
  padding: 615px 0 20px 0;
  ::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 90px;
    width: 100%;
    height: 0.5px;
    background-color: #E4E7ED;
    z-index: 1;
  }
  .editbtn {
    background-color: #e15536;
    color: #fff;
    width: 110px;
    border-radius: 5px;
    font-weight: 400;
    border: 1px solid #e15536;
  }
}
.imgdata {
  padding-top: 27px;
  display: flex;
}
.imginfo {
  text-align: left !important;
  display: inline-block;
  display: flex;
  padding-top: 25px;
  padding-left: 10px;
}
::v-deep .el-image__inner {
padding-left: 10px;
}
.footboxs {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 360px 0 20px 0;
  ::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 90px;
    width: 100%;
    height: 0.5px;
    background-color: #E4E7ED;
    z-index: 1;
  }
  .editbtn {
    background-color: #e15536;
    color: #fff;
    width: 110px;
    border-radius: 5px;
    font-weight: 400;
    border: 1px solid #e15536;
  }
}
.posr {
  position: relative;
  right: 38px;
}
::v-deep .el-button--default:hover {
  background: #ff6b4a !important;
  color: #fff !important;
}
</style>
